<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食光集 - 菜谱详情</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF9AA2', // 可爱粉色
                        secondary: '#FFB7B2', // 浅粉色
                        accent: '#FFDAC1', // 橙色
                        light: '#E2F0CB', // 浅绿色
                        dark: '#B5EAD7', // 深绿色
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* 自定义样式 */
        .glass-effect {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .nav-tab {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-tab.active {
            color: #FF9AA2;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 3px;
            background-color: #FF9AA2;
            border-radius: 3px;
        }
        .recipe-card {
            transition: transform 0.3s;
        }
        .recipe-card:hover {
            transform: translateY(-5px);
        }
        
        /* 点赞特效 */
        @keyframes likeAnimation {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        .like-animation {
            animation: likeAnimation 0.5s ease;
        }
        
        /* 点赞按钮样式 */
        .like-button {
            position: relative;
            z-index: 10;
        }
        
        .like-button.liked {
            color: #FF9AA2;
        }
        
        .like-button.liked i {
            color: #FF9AA2;
        }
        
        /* 评论样式 */
        .comment-item {
            transition: all 0.3s ease;
        }
        
        .comment-item:hover {
            background-color: rgba(255, 154, 162, 0.05);
        }
        
        /* 步骤导航样式 */
        .step-nav {
            transition: all 0.3s ease;
        }
        
        .step-nav.active {
            background-color: #FF9AA2;
            color: white;
        }
        
        /* 计时器样式 */
        .timer {
            transition: all 0.3s ease;
        }
        
        .timer.active {
            background-color: #FF9AA2;
            color: white;
        }
        
        /* 评论输入框动画 */
        @keyframes expandInput {
            from { height: 40px; }
            to { height: 100px; }
        }
        
        .comment-input-expanded {
            animation: expandInput 0.3s forwards;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-pink-50 to-white">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="discover.html" class="text-gray-600 hover:text-gray-900">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-xl font-bold text-gray-800">菜谱详情</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-share-alt"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 内容区域 -->
    <div class="container mx-auto px-4 pt-20 pb-24">
        <!-- 菜谱图片轮播 -->
        <div class="glass-effect rounded-xl overflow-hidden mb-4">
            <div class="relative">
                <div class="carousel overflow-hidden">
                    <div class="carousel-inner flex transition-transform duration-300">
                        <div class="carousel-item w-full flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="意式肉酱面" class="w-full h-64 object-cover">
                        </div>
                        <div class="carousel-item w-full flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="意式肉酱面步骤1" class="w-full h-64 object-cover">
                        </div>
                        <div class="carousel-item w-full flex-shrink-0">
                            <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="意式肉酱面步骤2" class="w-full h-64 object-cover">
                        </div>
                    </div>
                </div>
                <div class="absolute bottom-3 left-0 right-0 flex justify-center space-x-2">
                    <button class="w-2 h-2 rounded-full bg-white/50 carousel-indicator active"></button>
                    <button class="w-2 h-2 rounded-full bg-white/50 carousel-indicator"></button>
                    <button class="w-2 h-2 rounded-full bg-white/50 carousel-indicator"></button>
                </div>
                <button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/30 hover:bg-white/50 rounded-full p-2 text-white carousel-prev">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/30 hover:bg-white/50 rounded-full p-2 text-white carousel-next">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        
        <!-- 菜谱信息 -->
        <div class="glass-effect rounded-xl p-4 mb-4">
            <div class="flex justify-between items-center mb-2">
                <h2 class="text-xl font-bold text-gray-800">意式肉酱面</h2>
                <div class="flex items-center text-xs text-gray-500">
                    <i class="fas fa-fire mr-1"></i>
                    <span>中等</span>
                </div>
            </div>
            <p class="text-gray-600 mb-3">经典意式风味，浓郁可口，适合家庭聚餐或朋友聚会。</p>
            <div class="flex items-center justify-between text-sm text-gray-500">
                <div class="flex items-center">
                    <i class="far fa-clock mr-1"></i>
                    <span>30分钟</span>
                </div>
                <div class="flex items-center">
                    <i class="far fa-comment mr-1"></i>
                    <span>12条评论</span>
                </div>
                <div class="flex items-center">
                    <i class="far fa-heart mr-1"></i>
                    <span>128人喜欢</span>
                </div>
            </div>
        </div>
        
        <!-- 食材清单 -->
        <div class="glass-effect rounded-xl p-4 mb-4">
            <h3 class="text-lg font-bold text-gray-800 mb-3">食材清单</h3>
            <div class="space-y-2">
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">意大利面</span>
                    <span class="text-gray-500">200g</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">牛肉末</span>
                    <span class="text-gray-500">300g</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">番茄酱</span>
                    <span class="text-gray-500">200ml</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">洋葱</span>
                    <span class="text-gray-500">1个</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">大蒜</span>
                    <span class="text-gray-500">2瓣</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">橄榄油</span>
                    <span class="text-gray-500">2汤匙</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">盐</span>
                    <span class="text-gray-500">适量</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-700">黑胡椒</span>
                    <span class="text-gray-500">适量</span>
                </div>
            </div>
        </div>
        
        <!-- 步骤说明 -->
        <div class="glass-effect rounded-xl p-4 mb-4">
            <h3 class="text-lg font-bold text-gray-800 mb-3">步骤说明</h3>
            
            <!-- 步骤导航 -->
            <div class="flex overflow-x-auto pb-2 mb-4">
                <div class="step-nav flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2 active" data-step="1">1</div>
                <div class="step-nav flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2" data-step="2">2</div>
                <div class="step-nav flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2" data-step="3">3</div>
                <div class="step-nav flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2" data-step="4">4</div>
                <div class="step-nav flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2" data-step="5">5</div>
            </div>
            
            <!-- 步骤内容 -->
            <div class="step-content" id="step-1">
                <div class="flex items-start mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3 flex-shrink-0">
                        <span class="text-white font-bold">1</span>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 mb-1">准备食材</h4>
                        <p class="text-gray-600">将洋葱和大蒜切碎，牛肉末提前解冻。</p>
                    </div>
                </div>
                <div class="flex items-start mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3 flex-shrink-0">
                        <span class="text-white font-bold">2</span>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 mb-1">煮面</h4>
                        <p class="text-gray-600">锅中加水烧开，加入适量盐，放入意大利面煮8-10分钟至七分熟，捞出沥干水分。</p>
                        <div class="mt-2">
                            <button class="timer px-3 py-1 rounded-full bg-primary/10 text-primary text-sm flex items-center">
                                <i class="far fa-clock mr-1"></i>
                                <span>10分钟</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="flex items-start mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3 flex-shrink-0">
                        <span class="text-white font-bold">3</span>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 mb-1">炒肉酱</h4>
                        <p class="text-gray-600">锅中倒入橄榄油，放入洋葱和大蒜炒香，加入牛肉末翻炒至变色，加入番茄酱、盐和黑胡椒调味。</p>
                        <div class="mt-2">
                            <button class="timer px-3 py-1 rounded-full bg-primary/10 text-primary text-sm flex items-center">
                                <i class="far fa-clock mr-1"></i>
                                <span>15分钟</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="flex items-start mb-4">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3 flex-shrink-0">
                        <span class="text-white font-bold">4</span>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 mb-1">混合</h4>
                        <p class="text-gray-600">将煮好的意大利面倒入肉酱中，翻炒均匀，让面条充分吸收酱汁。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-3 flex-shrink-0">
                        <span class="text-white font-bold">5</span>
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-800 mb-1">装盘</h4>
                        <p class="text-gray-600">将意面装盘，撒上适量黑胡椒和帕玛森奶酪即可享用。</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 评论区 -->
        <div class="glass-effect rounded-xl p-4 mb-4">
            <div class="flex justify-between items-center mb-3">
                <h3 class="text-lg font-bold text-gray-800">评论区</h3>
                <span class="text-sm text-gray-500">12条评论</span>
            </div>
            
            <!-- 评论列表 -->
            <div class="space-y-4 mb-4">
                <div class="comment-item p-3 rounded-lg">
                    <div class="flex items-center mb-2">
                        <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center mr-2">
                            <span class="text-primary font-bold">小</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-sm">小厨娘</h4>
                            <p class="text-xs text-gray-500">2023-07-15</p>
                        </div>
                    </div>
                    <p class="text-gray-600 text-sm">这个意面太好吃了！肉酱的味道很浓郁，面条的口感也很棒。我按照步骤做，一次就成功了，家人很喜欢！</p>
                    <div class="flex items-center mt-2">
                        <button class="text-xs text-gray-500 flex items-center mr-4">
                            <i class="far fa-thumbs-up mr-1"></i>
                            <span>8</span>
                        </button>
                        <button class="text-xs text-gray-500 flex items-center">
                            <i class="far fa-comment mr-1"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <div class="comment-item p-3 rounded-lg">
                    <div class="flex items-center mb-2">
                        <div class="w-8 h-8 rounded-full bg-secondary/20 flex items-center justify-center mr-2">
                            <span class="text-secondary font-bold">美</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-sm">美食家</h4>
                            <p class="text-xs text-gray-500">2023-07-14</p>
                        </div>
                    </div>
                    <p class="text-gray-600 text-sm">我加了一点辣椒，味道更好了！建议大家可以试试，不过不要加太多，会盖住肉酱的味道。</p>
                    <div class="flex items-center mt-2">
                        <button class="text-xs text-gray-500 flex items-center mr-4">
                            <i class="far fa-thumbs-up mr-1"></i>
                            <span>5</span>
                        </button>
                        <button class="text-xs text-gray-500 flex items-center">
                            <i class="far fa-comment mr-1"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
                
                <div class="comment-item p-3 rounded-lg">
                    <div class="flex items-center mb-2">
                        <div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center mr-2">
                            <span class="text-accent font-bold">食</span>
                        </div>
                        <div>
                            <h4 class="font-bold text-gray-800 text-sm">食光集</h4>
                            <p class="text-xs text-gray-500">2023-07-13</p>
                        </div>
                    </div>
                    <p class="text-gray-600 text-sm">我用的是全麦意面，虽然口感没有普通意面好，但是更健康。肉酱的味道还是很棒的！</p>
                    <div class="flex items-center mt-2">
                        <button class="text-xs text-gray-500 flex items-center mr-4">
                            <i class="far fa-thumbs-up mr-1"></i>
                            <span>3</span>
                        </button>
                        <button class="text-xs text-gray-500 flex items-center">
                            <i class="far fa-comment mr-1"></i>
                            <span>回复</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 评论输入框 -->
            <div class="flex items-start">
                <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center mr-2 flex-shrink-0">
                    <span class="text-primary font-bold">我</span>
                </div>
                <div class="flex-1">
                    <textarea placeholder="写下你的评论..." class="w-full p-2 border border-gray-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/50" rows="1"></textarea>
                    <div class="flex justify-end mt-2">
                        <button class="px-4 py-1 bg-primary text-white rounded-full text-sm">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md py-3 px-4 flex justify-around items-center shadow-sm">
        <button class="flex flex-col items-center text-gray-600">
            <i class="far fa-heart text-xl"></i>
            <span class="text-xs mt-1">收藏</span>
        </button>
        <button class="flex flex-col items-center text-gray-600">
            <i class="far fa-comment text-xl"></i>
            <span class="text-xs mt-1">评论</span>
        </button>
        <button class="px-6 py-2 bg-primary text-white rounded-full flex items-center">
            <i class="fas fa-utensils mr-2"></i>
            <span>开始烹饪</span>
        </button>
    </div>

    <script>
        // 轮播图功能
        const carousel = {
            currentIndex: 0,
            items: document.querySelectorAll('.carousel-item'),
            indicators: document.querySelectorAll('.carousel-indicator'),
            inner: document.querySelector('.carousel-inner'),
            
            init() {
                this.bindEvents();
                this.startAutoPlay();
            },
            
            bindEvents() {
                document.querySelector('.carousel-prev').addEventListener('click', () => this.prev());
                document.querySelector('.carousel-next').addEventListener('click', () => this.next());
                
                this.indicators.forEach((indicator, index) => {
                    indicator.addEventListener('click', () => this.goTo(index));
                });
            },
            
            startAutoPlay() {
                setInterval(() => this.next(), 5000);
            },
            
            goTo(index) {
                this.currentIndex = index;
                this.updateCarousel();
            },
            
            prev() {
                this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
                this.updateCarousel();
            },
            
            next() {
                this.currentIndex = (this.currentIndex + 1) % this.items.length;
                this.updateCarousel();
            },
            
            updateCarousel() {
                this.inner.style.transform = `translateX(-${this.currentIndex * 100}%)`;
                this.indicators.forEach((indicator, index) => {
                    indicator.classList.toggle('active', index === this.currentIndex);
                });
            }
        };
        
        // 初始化轮播图
        carousel.init();
        
        // 步骤导航切换
        document.querySelectorAll('.step-nav').forEach(step => {
            step.addEventListener('click', function() {
                // 移除所有步骤的激活状态
                document.querySelectorAll('.step-nav').forEach(s => {
                    s.classList.remove('active');
                });
                
                // 添加当前步骤的激活状态
                this.classList.add('active');
                
                // 滚动到对应步骤
                const stepNumber = this.getAttribute('data-step');
                const stepElement = document.querySelector(`#step-${stepNumber}`);
                if (stepElement) {
                    stepElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
        
        // 计时器功能
        document.querySelectorAll('.timer').forEach(timer => {
            timer.addEventListener('click', function() {
                // 如果计时器已经在运行，则停止
                if (this.classList.contains('active')) {
                    this.classList.remove('active');
                    clearInterval(this.interval);
                    return;
                }
                
                // 停止其他计时器
                document.querySelectorAll('.timer.active').forEach(t => {
                    t.classList.remove('active');
                    clearInterval(t.interval);
                });
                
                // 激活当前计时器
                this.classList.add('active');
                
                // 获取时间（分钟）
                const timeText = this.querySelector('span').textContent;
                const minutes = parseInt(timeText);
                let seconds = minutes * 60;
                
                // 更新计时器显示
                const updateTimer = () => {
                    const mins = Math.floor(seconds / 60);
                    const secs = seconds % 60;
                    this.querySelector('span').textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
                    
                    if (seconds <= 0) {
                        clearInterval(this.interval);
                        this.classList.remove('active');
                        this.querySelector('span').textContent = timeText;
                        
                        // 播放提示音
                        const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
                        audio.play();
                    } else {
                        seconds--;
                    }
                };
                
                // 开始计时
                updateTimer();
                this.interval = setInterval(updateTimer, 1000);
            });
        });
        
        // 评论输入框自动调整高度
        const commentTextarea = document.querySelector('textarea');
        if (commentTextarea) {
            commentTextarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
                
                if (this.value.length > 0) {
                    this.classList.add('comment-input-expanded');
                } else {
                    this.classList.remove('comment-input-expanded');
                }
            });
        }
        
        // 评论点赞功能
        document.querySelectorAll('.comment-item button').forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                
                const countElement = this.querySelector('span');
                if (countElement) {
                    let count = parseInt(countElement.textContent);
                    countElement.textContent = count + 1;
                    
                    // 添加点赞动画
                    this.classList.add('like-animation');
                    setTimeout(() => {
                        this.classList.remove('like-animation');
                    }, 500);
                }
            });
        });
    </script>
</body>
</html> 